<template>
  <BasicTable @register="registerTable" @fetchSuccess="onFetchSuccess"
              :indentSize="10" :indexColumnProps="indexColumnProps"
              :onRowClick="handleClick" :onRowDbClick="handleDblclick" :rowClassName="rowClassName"
  >
    <!--插槽:table标题-->
    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:plus" @click="handleCreate">新增</a-button>
    </template>

    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
    <!--:dropDownActions="getDropDownAction(record)"-->
  </BasicTable>

  <DepartFormModal @register="registerModal" @success="handleSuccess"/>
  <!--角色用户表格-->
  <RoleUserTable @register="roleUserDrawer" />
  <!--角色菜单授权抽屉-->
  <RolePermissionDrawer @register="rolePermissionDrawer" />

</template>

<script lang="ts" setup name="system-depart-role">
import { nextTick, provide, reactive, ref } from "vue";
import { ActionItem, BasicTable, TableAction } from "/@/components/Table";
import { useDrawer } from "/@/components/Drawer";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { departTreeGrid, deleteDepart } from "./depart.role.api";
import { departTreeColumns } from "./depart.role.data";

import DepartFormModal from './components/DepartFormModal.vue'
//角色权限
import RoleUserTable from "/@/views/system/role/components/RoleUserTable.vue";
import RolePermissionDrawer from "/@/views/system/role/components/RolePermissionDrawer.vue";
import DepartRuleTab from '/@/views/system/depart/components/DepartRuleTab.vue'
import { useDesign } from "/@/hooks/web/useDesign";

const showFooter = ref(true);
const [roleUserDrawer, { openDrawer: openRoleUserDrawer }] = useDrawer();
const [rolePermissionDrawer, { openDrawer: openRolePermissionDrawer }] = useDrawer();

// 列表页面公共参数、方法
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  designScope: "depart-role",
  tableProps: {
    api: departTreeGrid,
    columns: departTreeColumns,
    size: "small",
    showIndexColumn: true,    //行号
    useSearchForm: false,
    showActionColumn: true,
    showTableSetting: false,
    defaultExpandAllRows: true,
    isTreeTable: true,
    //expandIcon: expandIcon,
    expandIconColumnIndex: 0,
    pagination: false,
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    }
  },
});

provide('prefixCls', prefixCls)
const emit = defineEmits(["select", "rootTreeData"]);

//注册table数据
const [registerTable, { reload, expandAll }] = tableContext;

const indexColumnProps = {
  title: "",
  dataIndex: "index",
  width: "20px"
};

// 注册 modal
const [registerModal, { openModal }] = useModal()

// 按钮操作 --------------------------------------------------
/**
 * 新增事件
 */
function handleCreate() {
  openModal(true, {
    isUpdate: false,
  });
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteDepart({id: record.id}, reload);
}

/**
 * 角色用户
 */
function handleUser(record) {
  //onSelectChange(selectedRowKeys)
  openRoleUserDrawer(true, record);
}

/**
 * 角色授权弹窗
 */
function handlePerssion(record) {
  openRolePermissionDrawer(true, { roleId: record.id });
}

/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: '编辑',
      icon: "ant-design:form-outlined",
      onClick: handleEdit.bind(null, record),
    },
    {
      label: "删除",
      color: "error",
      icon: "ant-design:rest-twotone",
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    }
  ]
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    {
      label: "编辑",
      onClick: handleEdit.bind(null, record)
    },
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    }
  ]
}

function handleSuccess() {
  reload();
}

async function onFetchSuccess() {
  // 演示默认展开所有表项
  await nextTick(() => {
    expandAll();
  });
}

//单击行
let selectRows = reactive<any>({id: '', username: ''});
function handleClick(record) {
  selectRows = record
}

//双击行
function handleDblclick(record) {
  handleEdit(record);
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

/**
 * 编辑事件
 */
async function handleEdit(record: Recordable) {
  //Object.assign(record, selectRows)
  openModal(true, {
    record,
    isUpdate: true,
  });
}

</script>

<style lang="less">

</style>
